<script setup>
import { ref } from 'vue'
// import { shuffle as _shuffle } from 'lodash-es'

const getInitialItems = () => [1, 2, 3, 4, 5]
const items = ref(getInitialItems())
let id = items.value.length + 1

function insert() {
    const index = Math.round(items.value.length * Math.random())
    items.value.splice(index, 0, id++)
}

function shuffle() {
    // items.value = _shuffle(items.value)
}

function reset() {
    items.value = getInitialItems()
    id = items.value.length + 1
}

function remove(item) {
    const index = items.value.indexOf(item)
    if (index > -1) {
        items.value.splice(index, 1)
    }
}
</script>

<template>
    <button @click="insert">Insert to random line</button>
    <button @click="shuffle">shuffle</button>
    <button @click="reset">reset</button>
    <TransitionGroup tag="ul" name="fade" class="container">
        <div v-for="item in items" :key="item" class="item">
            {{ item }}
            <button @click="remove(item)">X</button>
        </div>
    </TransitionGroup>
</template>

<style>
.container {
    padding: 0;
}

.item {
    width: 100%;
    height: 30px;
    color: #000;
    background-color: #e0e0e0;
    border: 1px solid #cfcdcd;
}

/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
    position: absolute;
}
</style>